<template>
	<view class="content">
		<view class="repairinfo">
			<view class="repaircenter">
				<view @click="toFill" class="btn1">
					<image src="@/static/images/apply.png"></image>
				</view>
				<view @click="to_release" class="btn2">
					<image src="@/static/images/xun.png"></image>
					<span class="tips" v-if="incompleteshow">{{ intips_complete }}</span>
				</view>
				<view @click="to_order" class="btn3">
					<image src="@/static/images/mine.png"></image>
				</view>
			</view>
			<view class="repaircenter_text" :style="{ fontSize: deviceInfor ? '32rpx' : '20rpx' }">
				<span>维修申请</span>
				<span>我的巡检</span>
				<span>我的报修</span>
			</view>
		</view>
		<!-- <z-paging ref="paging" v-model="dataList" @query="queryList" >
			<view class="con_box" v-for="(item,index) in dataList" :key="item.id" @click="itemClick(item)">
				<view class="photo">
					<image :src="item.thumb" mode=""></image>
				</view>
				<view class="text_con">
					<view class="title">
						{{item.title}}
					</view>
					<view class="addtime">
						{{item.add_time}}
					</view>
					<view class="desc">
						 {{item.desc}}
					</view>
				</view>
			</view>
		</z-paging> -->
	</view>
</template>
<script>
export default {
	data() {
		return {
			dataList: [],
			incompleteshow: false,
			intips_complete: '',
			//设备尺寸
			deviceInfor: null
		};
	},
	onLoad(op) {
		this.id = op.id;
		const systemInfo = uni.getSystemInfoSync();
		// 假设平板设备的屏幕宽度大于768px，可以根据实际情况调整
		// 平板：deviceInfor是false
		// 手机：deviceInfor是true
		if (systemInfo.screenWidth >= 768) {
			getApp().globalData.deviceInfor = false;
		} else {
			getApp().globalData.deviceInfor = true;
		}
	},
	onShow() {
		this.deviceInfor = getApp().globalData.deviceInfor;
	},
	methods: {
		/* queryList(pageNo, pageSize) {
					const params = {
						page: pageNo,
						limit: pageSize
					}
					
					 this.$api.getList(params).then(res => {
						console.log(res)
						if (res.code == 0) {
							this.$refs.paging.complete(res.data);
						}else{
							this.$refs.paging.complete(false);
						}
					}).catch((err)=>{
						console.log(err);
					})
				},
				itemClick(item) {
					console.log(111)
					uni.navigateTo({
					    url:'./detail?id='+item.id
					});
				} */
		toFill() {
			uni.navigateTo({
				url: '/pagesIndex/repair/index'
			});
		},
		to_order() {
			uni.navigateTo({
				url: '/pagesIndex/order/order'
			});
		},
		to_release() {
			uni.navigateTo({
				url: '/pagesIndex/release/release'
			});
		},
		// 获取巡检订单消息提醒小红点
		tips() {
			uni.showToast({
				title: '4',
				duration: 1500,
				icon: 'none'
			});
		}
	}
};
</script>
<style lang="scss" scoped>
.content {
	height: 100%;
	width: 100%;
	background-image: url('https://www.bjroyalkitchen.com/images/root/16413492246501.png');
	background-repeat: no-repeat;
	background-size: 100% 100%;
	.repaircenter {
		width: 90%;
		height: 143rpx;
		position: absolute;
		top: 500rpx;
		left: 0;
		right: 0;
		bottom: 0;
		margin: 0 auto;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}
	.repaircenter .btn1 {
		width: 33%;
		height: 100%;
	}
	.repaircenter .btn2 image {
		width: 143rpx;
		height: 143rpx;
		margin-left: 40rpx;
	}
	.repaircenter .btn3 {
		width: 33%;
		height: 100%;
	}
	.repaircenter .btn3 image {
		width: 143rpx;
		height: 143rpx;
		margin-left: 55rpx;
	}
	.repaircenter .btn2 {
		width: 33%;
		height: 100%;
		position: relative;
	}
	.repaircenter .btn1 image {
		width: 143rpx;
		height: 143rpx;
		margin-left: 25rpx;
	}
	.tips {
		background-color: rgb(219, 60, 62);
		border-radius: 50rpx;
		font-size: 22rpx;
		color: #fff;
		height: 20rpx;
		line-height: 20rpx;
		text-align: center;
		position: absolute;
		top: 10rpx;
		right: 55rpx;
		padding: 5rpx 10rpx;
	}
	.repaircenter_text {
		width: 100%;
		height: 100rpx;
		position: absolute;
		top: 650rpx;
		left: 0;
		right: 0;
		bottom: 0;
		margin: 0 auto;
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		align-items: center;
		color: #fff;
		font-size: 32rpx;
		font-weight: 550;
		background-color: rgba(168, 65, 0, 0.4);
	}

	@media (min-width: 768px) {
		.repaircenter {
			top: 300rpx;
			height: 100rpx;
		}
		.repaircenter_text{
			top: 400rpx;
			height: 80rpx;
		}
		.repaircenter .btn2 image,.repaircenter .btn1 image,.repaircenter .btn3 image {
			width: 100rpx;
			height: 100rpx;
		}
		.repaircenter .btn1 image{
			margin-left: 45rpx;
		}
		.repaircenter .btn2 image{
			margin-left: 60rpx;
		}
		.repaircenter .btn3 image{
			margin-left: 85rpx;
		}
	}
	@media (max-width: 767px) {
		.repaircenter {
			top: 500rpx;
			height: 143rpx;
		}
		.repaircenter_text{
			top: 650rpx;
			height: 100rpx;
		}
		.repaircenter .btn2 image,.repaircenter .btn1 image,.repaircenter .btn3 image {
			width: 143rpx;
			height: 143rpx;
		}
		.repaircenter .btn1 image{
			margin-left: 25rpx;
		}
		.repaircenter .btn2 image{
			margin-left: 40rpx;
		}
		.repaircenter .btn3 image{
			margin-left: 55rpx;
		}
	}
}
</style>
<style>
page {
	margin: 0;
	padding: 0;
	height: 100%;
	width: 100%;
}
// 去掉页面滚动条
::-webkit-scrollbar {
	display: none !important;
	width: 0 !important;
	height: 0 !important;
	-webkit-appearance: none;
	background: transparent;
}
</style>
